<template>
  <div class="table-box">
    <div class="card mb10 pt0 pb0">
      <StatusFilter :data="selectFilterData" :default-values="selectFilterValues" @change="changeSelectFilter" />
    </div>
    <ProTable
      ref="pTable"
      :columns="columns"
      :init-param="Object.assign(selectFilterValues, initParam)"
      :request-api="getTableList"
    >
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="handleOpenDialog(OptEnum.CREATE)"> 新增开票申请 </el-button>
      </template>
      <template #billType="scope">
        <el-tag :type="scope.row.billType === sysEnum.ONE ? 'primary' : 'info'">
          {{ filterEnum(scope.row.billType, billType) }}
        </el-tag>
      </template>
      <template #status="scope">
        <el-tag :type="scope.row.status === sysEnum.SIXTEEN ? 'danger' : scope.row.status === sysEnum.FOUR ? 'info' : 'primary'">
          {{ filterEnum(scope.row.status, billStatusType) }}
        </el-tag>
      </template>
      <template #invoiceType="scope">
        <el-tag :type="scope.row.invoiceType === sysEnum.ONE ? 'primary' : 'danger'">
          {{ filterEnum(scope.row.invoiceType, invoiceShortType) }}
        </el-tag>
      </template>
      <template #operation="scope">
        <el-button type="primary" :icon="View" size="small" text @click="handleOpenDialog(OptEnum.VIEW, scope.row)">
          查看
        </el-button>
        <el-button type="danger" :icon="Delete" size="small" text @click="handleDeleteItem(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <BillDialog ref="dialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import StatusFilter from "@/components/StatusFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import { View, Delete, CirclePlus } from "@element-plus/icons-vue";
import { getBillVoListApi, deleteBillApi, getBillCntApi } from "@/api/modules/cpyjob/bill";
import { ColumnProps } from "@/components/ProTable/interface";
import { OptEnum, sysEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { billType, billStatusType, invoiceShortType } from "@/biz/datas/appData";

import BillDialog from "./components/BillDialog.vue";
import { useHandleData } from "@/hooks/useHandleData";
const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});

const selectFilterData = ref([
  {
    title: "",
    key: "status",
    options: [
      {
        label: "全部",
        value: 0,
        icon: "Menu",
        total: 0
      },
      {
        label: "已开票",
        value: 8,
        icon: "FolderChecked",
        total: 0
      },
      {
        label: "开票中",
        value: 16,
        icon: "Folder",
        total: 0
      }
    ]
  }
]);
const selectFilterValues = reactive({ status: 0 });
const changeSelectFilter = (value: typeof selectFilterValues) => {
  // pTable.value.pageable.pageNum = 0;
  // console.log("参数的变化", value.status);
  selectFilterValues.status = value.status;
};
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
  // 这边可以处理一下参数
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.billDate && (newParams.startDate = newParams.billDate[0]);
  newParams.billDate && (newParams.endDate = newParams.billDate[1]);
  delete newParams.createDate;
  return getBillVoListApi(newParams);
};
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 80, fixed: "left" },
  {
    prop: "billDate",
    label: "开票时间",
    search: {
      el: "date-picker",
      props: { type: "daterange", valueFormat: "YYYY-MM-DD", clearable: true }
    }
  },
  {
    prop: "status",
    label: "状态",
    width: 100
  },
  {
    prop: "billType",
    label: "抬头类型"
  },
  {
    prop: "invoiceType",
    label: "发票类型",
    width: 100,
    enum: invoiceShortType,
    search: { el: "select" }
  },
  {
    prop: "billAmt",
    width: 100,
    label: "开票金额"
  },
  {
    prop: "userName",
    label: "开票人",
    width: 100
  },
  {
    prop: "companyName",
    label: "开票抬头",
    search: { el: "input" }
  },
  {
    prop: "billNo",
    label: "开票单号"
  },
  {
    prop: "operation",
    width: 200,
    fixed: "right",
    label: "操作"
  }
];

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

//初始化一些参数
onMounted(() => {
  // console.log("加载数据", selectFilterData.value);
  getBillCntApi().then(res => {
    // console.log("加载数据", res);
    if (res && res.data) {
      let data = res.data;
      selectFilterData.value[0].options[0].total = data?.totalCnt || 0;
      selectFilterData.value[0].options[1].total = data?.cnt1 || 0;
      selectFilterData.value[0].options[2].total = data?.cnt2 || 0;
    }
  });
});

// //切换禁用,启用状态
// const handleChangeActive = async (row: FinanceBillVo) => {
//   await useHandleData(
//     changeFlagActiveApi,
//     {
//       id: row.id!,
//       flagActive: row.flagActive == activeEnum.ACTIVE ? activeEnum.INACTIVE : activeEnum.ACTIVE
//     },
//     `切换【${row.name}】状态`
//   );
//   pTable.value.getTableList();
// };
// 删除信息
const handleDeleteItem = async (params: any) => {
  await useHandleData(deleteBillApi, { id: params.id! }, `确认删除【${params.billAmt}】的开票信息`);
  pTable.value.getTableList();
};

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  // console.log("开票弹窗", params);
  dialogRef.value.acceptParams(params);
};
</script>
